<template>
    <div class="book-detail f f-ac f-col">
        <Breadcrumb router />
        <div class="book-detail-body">
            <div class="body-top">
                <Title :label="detail.title" :time="detail.createtime" />
                <div class="f f-ac f-jb mt-20">
                    <img :src="baseUrl+detail.image" class="detail-img" />
                    <div class="detail-info f f-col f-jb">
                        <div class="f f-w f-jb">
                            <!-- <div class="column mb-30">
                                载体形态：
                                <span>{{ detail.aa || "-" }}</span>
                            </div> -->
                            <div class="column mb-30">
                                主题：
                                <span>{{ detail.title || "-" }}</span>
                            </div>
                            <div class="column mb-30">
                                责任者：
                                <span>{{ detail.author || "-" }}</span>
                            </div>
                            <div class="column mb-30">
                                出版时间：
                                <span>{{ detail.publication_time || "-" }}</span>
                            </div>
                            <div class="column mb-30">
                                出版者：
                                <span>{{ detail.publication_user || "-" }}</span>
                            </div>
                        </div>
                        <div class="f f-ac">
                            <My-btn label="在线阅读" bg-color="dark-blue" width="142" height="37" @click="handleRead"
                                style="margin-right: 40px" />
                            <My-btn label="目录" bg-color="line-gray" width="142" height="37" @click="handleCatalogue" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="body-bottom mt-30">
                <Action-bar :comment="detail.count" :like="detail.like" :collect="detail.collect" :type="5"
                    :is_like="detail.is_like" :is_collect="detail.is_collect" :id="detail.id" @like="handleLike" />
                <Comment :id="detail.id" @comfirm="handleComment" :type="5"/>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        bookDetail,bookDirectory
    } from "@/utils/book/index.js";
    export default {
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                detail: {},
                count:'',
                list:[]
            };
        },
        created() {
            this.detail.id = this.$route.query.id
            this.getDetails(this.detail.id);
        },
        mounted() {},

        methods: {
            // 获取详情
            getDetails(id) {
                let that = this
                bookDetail({
                    id
                }).then((response) => {
                    that.detail = response.data
                   
                });
                bookDirectory({
                    book_lists_id: id,
                    page: 1,
                    limit: 40
                }).then((response) => {
                    that.count = response.data.count
                    that.list = response.data.list
                    
                    console.log(that.list,'that.count')
                });
            },
            // 在线阅读
            handleRead(v) {
                this.$router.push({
                    path: "/readBook/article",
                    query: {
                        id: this.list[0].id,
                        count:this.count
                    },
                });
            },
            // 目录
            handleCatalogue() {
                this.$router.push({
                    path: "/readBook/directory",
                    query: {
                        id: this.detail.id,
                        title: this.detail.title,
                        createtime: this.detail.createtime
                    },
                });
            },
            // 评论
            handleComment(v) {
                this.detail.comment = v;
            },
            // 点赞/收藏
            handleLike(v) {
                this.getDetails(v)
            }
        },
    };
</script>

<style lang="scss" scoped>
    .book-detail {
        width: 100%;

        &-body {
            width: 1200px;

            .body-top {
                width: 100%;
                height: 544px;
                box-sizing: border-box;
                padding: 30px 0;
                border-bottom: 1px dashed rgba(70, 110, 197, 0.2);

                .detail-img {
                    width: 357px;
                    height: 407px;
                }

                .detail-info {
                    width: 755px;
                    height: 245px;

                    .column {
                        color: #000;
                        font-size: 18px;
                        line-height: 22px;
                        position: relative;
                        margin-right: 80px;

                        &::before {
                            content: "";
                            position: absolute;
                            left: -5px;
                            display: inline-block;
                            width: 3px;
                            height: 22px;
                            background-color: rgba(70, 110, 197, 0.2);
                        }

                        span {
                            color: #ca9f7e;
                        }
                    }
                }
            }

            .body-bottom {
                video {
                    width: 100%;
                    height: 536px;
                    object-fit: cover;
                }

                .body-content {
                    word-break: break-all;
                    padding-bottom: 30px;
                    border-bottom: 1px dashed #d9d9d9;
                }
            }
        }
    }
</style>